<script>

    /**
     * 组合和选项总结:
     *   选项: 将数据分门别类的进行存储 data , methods ! 选项vue2提供的版本! 选项的数据都是响应式
     *      export default {
     *        data(){
     *          return {
     *              key:默认值,
     *              key:默认值 -> 响应式
     *           }
     *        }
     *        ,
     *        methods:{
     *        }
     *  
     *      }
     *   组合: 将所有数据都存在setup函数中,进行对外返回即可,没有分类! 组合vue3更新的版本,组合的数据默认都不是响应式,ref reactive进行处理
     *      export default {
     *          setup(){
     *                属性和方法   
     *                return { 属性和方法即可
     *                              }
     *            }
     * 
     *      }
     */
    // 工程化+组合api
    import {ref} from 'vue'
    export default{
        setup(){
            //属性和方法
            let counter = ref(0);
            let add = ()=>{
                counter.value ++;
            }
            let sub = ()=>{
                counter.value --;
            }
            return {
                counter,
                add,
                sub
            }
        }
    }

    let name = "哈哈哈";
    let age = 18;

</script>

<template>
  <div>
    <button @click="sub()">-</button>{{ counter }}<button @click="add()">+</button>
    姓名:{{ name }} 年龄: {{ age }}
  </div>
</template>

<style scoped>

</style>